<template>
  <xy-page title="应用列表" style="position:relative;">
    <template slot="btn">
      <el-button @click="showDialog = true" type="primary" style="margin: -8.5px 0 0;">新建应用</el-button>
    </template>
    <xy-table :tableData="tableData" :loading="tableData.isLoading" @change="getAppList"  v-show="!tableData.firtIn" :noEmpty="tableData.list.length==0?false:true">
      <el-table-column label="名称" prop="name" align="center"></el-table-column>
      <el-table-column label="CNAME域名(观看页)" prop="watchDomain" align="center"></el-table-column>
      <el-table-column label="CNAME域名(助教页)" prop="webappDomain" align="center"></el-table-column>
      <el-table-column label="创建时间" align="center">
        <template slot-scope="scope">{{scope.row.createTime | date}}</template>
      </el-table-column>
      <el-table-column label="状态" align="center">
        <template slot-scope="scope">
          {{scope.row.isActive==1?'正常':'禁用'}}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-popover placement="bottom">
            <div style="text-align: center;margin:0 auto; border-bottom: 1px solid #e6e6e6;">
              <div class="cursor" @click="toAppDetail(scope.row)">
                <el-button type="text">应用详情</el-button>
              </div>
              <div class="cursor" @click="toAppBcRoom(scope.row)">
                <el-button type="text">应用直播间</el-button>
              </div>
              <div class="cursor" @click="toBcCount(scope.row)">
                <el-button type="text">直播统计</el-button>
              </div>
              <div class="cursor" @click="toConsumption(scope.row.devAppId)">
                <el-button type="text">直播消费</el-button>
              </div>
            </div>
            <div style="text-align: center;margin:0 auto;">
              <div class="cursor" @click="isable(scope.row)">
                <el-button type="text">{{scope.row.isActive==0?'恢复':'禁用'}}</el-button>
              </div>
              <div class="cursor" @click="del(scope.row)">
                <el-button type="text">删除</el-button>
              </div>
            </div>
            <template slot="reference">
              <i class="el-icon-more" @click="show(scope.row)"></i>
            </template>
          </el-popover>
        </template>
      </el-table-column>
    </xy-table>
    <!-- 新建应用 -->
    <el-dialog title="创建应用" :visible.sync="showDialog" :before-close="beforeClose" :close-on-click-modal="false">
      <el-form :model="submitParams" label-width="180px" inline>
        <div class="require">
          <el-form-item label="名称">
            <el-input type="text" v-model="submitParams.name" style="width: 300px;" maxlength="20" placeholder="最长20个字符"></el-input>
          </el-form-item>
        </div>
        <div>
          <el-form-item label="描述">
            <el-input
              type="textarea"
              v-model="submitParams.description"
              rows="4"
              style="width: 300px;"
              maxlength="200"
              placeholder="最长200个字符"
              resize="none"
            ></el-input>
          </el-form-item>
        </div>
        <div class="require">
          <el-form-item label="CNAME域名（助教页）">
            <el-input type="text" v-model="submitParams.webappDomain" style="width: 300px;" maxlength="60"></el-input>
          </el-form-item>
        </div>
        <div class="require">
          <el-form-item label="CNAME域名（观看页）">
            <el-input type="text" v-model="submitParams.watchDomain" style="width: 300px;" maxlength="60"></el-input>
          </el-form-item>
        </div>
        <div class="require">
          <el-form-item label="额定并发">
            <el-input type="text" v-model="submitParams.concurrences" maxlength="9" style="width: 300px;" oninput="this.value=this.value.replace(/[^0-9]/g,'')"></el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirm" :loading="isSave">保 存</el-button>
      </div>
    </el-dialog>
  </xy-page>
</template>
<script>
export default {
  data() {
    return {
      popTitle:'',
      itemDetail: {},
      tableData: {
        firtIn:true,
        isLoading: false,
        list: [],
        total: 0,
        page: 1,
        size: 10
      },
      showDialog: false,
      isSave: false,
      submitParams: {
        name: '',
        description: '',// 描述
        watchDomain: '', // 观看cname
        webappDomain: '', //后台cname
        concurrences: '' ,//额定并发
      }
    }
  },
  methods:{
    beforeClose(){
      if(!this.submitParams.name && !this.submitParams.description && !this.submitParams.watchDomain && !this.submitParams.webappDomain && !this.submitParams.concurrences){
        this.showDialog = false
      }else{
        this.$confirm('数据尚未保存，是否关闭','提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(()=>{
          this.showDialog = false
          this.submitParams.name = ''
          this.submitParams.description = ''
          this.submitParams.watchDomain = ''
          this.submitParams.webappDomain = ''
          this.submitParams.concurrences = ''
        }).catch(()=>{
        })
      }
    },
    buildApp(){
      this.showDialog = true
    },
    //添加应用
    confirm(){
      if(!this.submitParams.name || !(this.submitParams.name.trim())){
        this.$message.warning('请填写名称')
        return
      }
      if(!this.submitParams.webappDomain){
        this.$message.warning('请填写CNAME域名（助教页）')
        return
      }else{
        if(!this.$utils.isCname(this.submitParams.webappDomain)){
          this.$message.error('CNAME域名（助教页）格式错误')
          return
        }
      }
      if(!this.submitParams.watchDomain){
        this.$message.warning('请填写CNAME域名（观看页）')
        return
      }else{
        if(!this.$utils.isCname(this.submitParams.watchDomain)){
          this.$message.error('CNAME域名（观看页）格式错误')
          return
        }
      }
      if(!this.submitParams.concurrences){
        this.$message.warning('请填写额定并发')
        return
      }
      this.isSave = true
      this.$postStream('/admin/instance/ccb/polyv/app/create.do',{
        data:this.submitParams,
        success:(res)=>{
          if(res.success){
            this.$message.success('添加应用成功')
            this.showDialog = false
            this.getAppList()
            this.submitParams={
              name: '',
              description: '',
              watchDomain: '',
              webappDomain:'',
              concurrences: ''
            }
          }else{
            this.$message.error('添加应用失败')
          }
        },
        error:()=>{
          this.$message.error('添加应用失败')
        },
        complete:()=>{
          this.isSave = false
        }
      })
    },
    toAppDetail(row) {
      this.$toPage("/appDetail", {
        devAppId: row.devAppId
      })
    },
    show(row) {
      this.itemDetail = row
    },
    isable(row) {
      if(row.isActive==1){
        this.popTitle = '是否禁用应用'
      }else{
        this.popTitle = '是否恢复应用'
      }
      this.$confirm(this.popTitle, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream('/admin/instance/ccb/polyv/app/updateStatus.do',{
          data:{
            appId:row.devAppId,
            status:row.isActive?'FORBIDDEN':'RESUME'
          },
          success:(res)=>{
            if(res.success){
              if(row.isActive==1){
                this.$message.success('禁用成功!')
              }else{
                this.$message.success('恢复成功!')
              }
              this.isvisible = false
              this.getAppList()
            }else{
              if(row.isActive==1){
                this.$message.success('禁用失败!')
              }else{
                this.$message.success('恢复失败!')
              }
              this.isvisible = false
            }
          },
          error:()=>{
            if(row.isActive==1){
                this.$message.success('禁用失败!')
              }else{
                this.$message.success('恢复失败!')
              }
          }
        })
        
      })
    },
    del(row) {
      this.$confirm('是否删除应用？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream('/admin/instance/ccb/polyv/app/delete.do',{
          data:{
            appId:row.devAppId
          },
          success:(res)=>{
            if(res.success){
              this.$message.success('删除成功!')
              this.getAppList()
            }else{
              this.$message.error('删除失败!')
            }
          },
          error:()=>{
            this.$message.error('删除失败!')
          }
        })
      })
    },
    toAppBcRoom(row){
      sessionStorage.setItem('menuAppId', row.devAppId)
      this.$toPage('/livemanage')
    },
    toBcCount(row){
      this.$toPage('/statistics/appCount',{
        appId: row.devAppId
      })
    },
    toConsumption(appId){
      this.$toPage('/consumption', {
        appId: appId
      })
    },
    getAppList(page){
      this.tableData.isLoading = true
      this.tableData.firtIn = false
      this.$postStream('/admin/instance/ccb/polyv/app/list.do',{
        data:{
          displayRecord:this.tableData.size,
          page: page || this.tableData.page,
        },
        success:(res)=>{
          if(res.success){
            if(res.object.list.length == 0 && (page || this.tableData.page) != 1){
              //这部分代码块：当非1页被删除完后，默认显示第1页
              this.tableData.page = 1
              this.getAppList()
              return
            }
            this.tableData.isLoading = false
            this.tableData.list = res.object.list
            this.tableData.total = res.object.count
            this.tableData.page = page || this.tableData.page
          }else{
            this.tableData.isLoading = false
            this.$message(res.message)
          }
        },
        error:function(res){
          this.tableData.isLoading = false
          this.$message(res.message)
        }
      })
    }
  },
  created(){
    this.$root.eventHandle.$emit("UPDATE_USERTYPE")
    this.getAppList();
  }
}
</script>
<style lang="scss" scoped>
.el-button {
  margin: 5px 0px;
}
.el-icon-more {
  cursor: pointer;
}
.cursor{
  &:hover{
    background-color: #ecf5ff;
  }
}
.require{
  &::after{
    content: '*';
    color: red;
    line-height: 45px;
  }
}
</style>

<style lang="scss">
.el-popover{
  padding: 0;
}
</style>